<script lang="ts" setup>
import { ref } from 'vue';
import type { FormInstance } from '@arco-design/web-vue/es/form';
import { $fetch } from '@/settings/utils/fetch';
import useNotification from '@/settings/hooks/notification';
import { useRouter } from 'vue-router';
import { useI18n } from 'vue-i18n';

const props = defineProps({
  id: {
    type: String,
    default: '',
  },
});

const loading = ref(false);
const formData = ref({
  applicant: '',
  phone: '',
  email: '',
  address: '',
  workUnit: '',
  job: '',
  wxCode: '',
  college: '',
  platform: '',
  type: '',
  technology: '',
  name: '',
  description: '',
  historyExperience: '',
  acquireSupport: '',
});
const formRef = ref<FormInstance>();
const router = useRouter();
const { success } = useNotification();
const { t } = useI18n();

const save = async () => {
  const { isSuccess } = await $fetch('/admin/education/activity/saveOrUpdate', {
    method: 'post',
    data: {
      id: props.id,
      ...formData.value,
    },
    loadingStatus: loading,
  });

  if (isSuccess) {
    success(t('settings.notification.success'));
    router.push('/operator/activity-application/index');
  }
};

const submit = async () => {
  const res = await formRef.value?.validate();

  if (res) {
    return;
  }

  save();
};

const getDetail = async () => {
  const { isSuccess, data } = await $fetch('/admin/education/activity/detail', {
    method: 'post',
    data: {
      id: props.id,
    },
    loadingStatus: loading,
  });

  if (isSuccess) {
    formData.value = data;
  }
}

const init = () => {
  if (props.id) {
    getDetail();
  }
}

init();
</script>

<template>
  <OpenPageSection>
    <OpenGeneralCard>
      <AForm ref="formRef" auto-label-width scroll-to-first-error :model="formData" @submit="submit">
        <AFormItem :label="$t('settings.view.activityApplication.edit.column9')" field="platform" :rules="[{ required: true, message: $t('settings.notification.requiredSelect') }]">
          <ASelect
            v-model="formData.platform"
            :options="[
              {
                value: 'campus',
                label: $t('settings.view.activityApplication.platformOptions.campus'),
              },
              {
                value: 'competition',
                label: $t('settings.view.activityApplication.platformOptions.competition'),
              }
            ]"
          />
        </AFormItem>

        <AFormItem :label="$t('settings.view.activityApplication.edit.column1')" field="applicant" :rules="[{ required: true, message: $t('settings.notification.required') }, { maxLength: 50 }]">
          <AInput v-model="formData.applicant" :max-length="50" allow-clear show-word-limit />
        </AFormItem>

        <AFormItem :label="$t('settings.view.activityApplication.edit.column2')" field="phone" :rules="[{ required: true, message: $t('settings.notification.required') }, { maxLength: 20 }]">
          <AInput v-model="formData.phone" :max-length="20" allow-clear show-word-limit />
        </AFormItem>

        <AFormItem :label="$t('settings.view.activityApplication.edit.column3')" field="email" :rules="[{ maxLength: 50 }]">
          <AInput v-model="formData.email" :max-length="50" allow-clear show-word-limit />
        </AFormItem>

        <AFormItem :label="$t('settings.view.activityApplication.edit.column4')" field="address" :rules="[{ maxLength: 100 }]">
          <AInput v-model="formData.address" :max-length="100" allow-clear show-word-limit />
        </AFormItem>

        <AFormItem :label="$t('settings.view.activityApplication.edit.column5')" field="workUnit" :rules="[{ maxLength: 50 }]">
          <AInput v-model="formData.workUnit" :max-length="50" allow-clear show-word-limit />
        </AFormItem>

        <AFormItem :label="$t('settings.view.activityApplication.edit.column6')" field="job" :rules="[{ maxLength: 50 }]">
          <AInput v-model="formData.job" :max-length="50" allow-clear show-word-limit />
        </AFormItem>

        <AFormItem :label="$t('settings.view.activityApplication.edit.column7')" field="wxCode" :rules="[{ maxLength: 50 }]">
          <AInput v-model="formData.wxCode" :max-length="50" allow-clear show-word-limit />
        </AFormItem>

        <AFormItem :label="$t('settings.view.activityApplication.edit.column8')" field="college" :rules="[{ maxLength: 50 }]">
          <AInput v-model="formData.college" :max-length="50" allow-clear show-word-limit />
        </AFormItem>

        <template v-if="formData.platform === 'competition'">
          <AFormItem :label="$t('settings.view.activityApplication.edit.column10')" field="type" :rules="[{ required: true, message: $t('settings.notification.requiredSelect') }]">
            <ASelect
              v-model="formData.type"
              :options="[
                {
                  value: 'competition',
                  label: $t('settings.view.activityApplication.typeOptions.competition'),
                }
              ]"
            />
          </AFormItem>

          <AFormItem :label="$t('settings.view.activityApplication.edit.column11')" field="technology" :rules="[{ maxLength: 100 }]">
            <AInput v-model="formData.technology" :max-length="100" allow-clear show-word-limit />
          </AFormItem>

          <AFormItem :label="$t('settings.view.activityApplication.edit.column12')" field="name" :rules="[{ maxLength: 100 }]">
            <AInput v-model="formData.name" :max-length="100" allow-clear show-word-limit />
          </AFormItem>

          <AFormItem :label="$t('settings.view.activityApplication.edit.column13')" field="description" :rules="[{ maxLength: 500 }]">
            <ATextarea v-model="formData.description" :max-length="500" allow-clear show-word-limit />
          </AFormItem>

          <AFormItem :label="$t('settings.view.activityApplication.edit.column14')" field="historyExperience" :rules="[{ maxLength: 500 }]">
            <ATextarea v-model="formData.historyExperience" :max-length="500" allow-clear show-word-limit />
          </AFormItem>

          <AFormItem :label="$t('settings.view.activityApplication.edit.column15')" field="acquireSupport" :rules="[{ maxLength: 500 }]">
            <ATextarea v-model="formData.acquireSupport" :max-length="500" allow-clear show-word-limit />
          </AFormItem>
        </template>

        <ADivider />

        <AFormItem>
          <ASpace>
            <AButton html-type="submit" type="primary" :loading="loading">{{ $t('settings.action.submit') }}</AButton>
          </ASpace>
        </AFormItem>
      </AForm>
    </OpenGeneralCard>
  </OpenPageSection>
</template>

<style lang="scss" scoped>
</style>
